<!-- 自助数据集选主表页面 -->
<template>
  <div style="height: calc(100% - 1px);">
    <h5>可选表</h5>
    <el-divider></el-divider>
    <!-- <el-input
      placeholder="输入关键字进行过滤"
      v-model="filterText">
    </el-input> -->
    <el-tree v-loading="isShowLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)" style="margin-right:0;height: 91%;overflow: auto"
      class="filter-tree"
      :data="menuData"
      node-key="menuId"
      default-expand-all
      :check-on-click-node="true"
      @node-click="handleCheckChange"
      :expand-on-click-node="true"
      :filter-node-method="filterNode"
      ref="tree"
      >
      <span style="ligin-height:40px;" class="custom-tree-node" slot-scope="{data }">
        <li v-if="addelevanceObj.menuId !=data.menuId" :class="{'fontStyle':data.disable,'colorStyle': selectIndexId == data.menuId,'el-icon-folder-opened':data.attr=='1' }"><span style="font-size:12px;color:#ccc;margin-right:10px">{{data.label}}</span> {{data.name}}</li>
      </span>
    </el-tree>
  </div>
</template>
<script>
import {MGNDIRQUERY1, QUERY_FONT_NODE} from '@api/url'
export default {
  data () {
    return {
      filterText: '',
      menuData: [], // 可选表
      isShowLoading: false,
      isExitDisable: false, // 是否被禁用过，
      isgoPage: false,
      name: '',
      selectIndexId: '',
       arr1: [
          {
            tableTitle: '4',
            label: 'IN'
          },
          {
            tableTitle: '5',
            label: 'OUT'
          },
          {
          tableTitle: '11',
          label: 'SQL'
          }, {
            tableTitle: '12',
            label: 'EX'
          }, {
            tableTitle: '13', // attr:1-分组，目录，2-叶子节点，表名，子菜单 11-sql,12-EXCEL,13-数据库表，14-自助数据集
            label: 'DB'
          }, {
          tableTitle: '14',
          label: 'SE'
        }]
    }
  },

created () {
  this.getTree()
},
computed: {
  addelevanceObj () {
    return this.$storeSave.state.addelevanceObj
  },
  activeTableId () {
    return this.$storeSave.state.activeTable
  }
},
watch: {
  activeTableId (val) {
    if (val.length > 0) {
      this.getParentData(val)
    }
  },
  filterText (val) {
      this.$refs.tree.filter(val)
    }
},
  methods: {
    // 搜索
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 通过传入key值返回名称
     getLabel (key) {
       let label = ''
       this.arr1.forEach(ele => {
         if (ele.tableTitle == key) {
           console.log(ele.label)
            label = ele.label
         }
       })
       return label
     },
    handleCheckChange (data) {
      console.log('选中了这条数据')
      console.log(data)

      if (data.attr != '1' && !data.disable) { // 不是分组且不是置灰数据
        if (data.type == '13') { // 只能选择数据库表
          this.queryAllNode(data)
        } else {
          this.$alert('主表只能是数据库表，请重新选择', '提示', {
            confirmButtonText: '确定',
            callback: action => {
            }
          })
        }
      }
    },
    // 全字段查询 选表时先查询是否能查询到全字段
    queryAllNode (param) {
        console.log(param)
        this.selectIndexId = ''
        console.log('主表全字段入参数据')
         this.$http.post(QUERY_FONT_NODE, {
          optMode: 'C', // A :add  B:update　Ｃ：查询
          modelId: param.menuId, // 表id
          connId: param.connId, // 连接ld
          idType: '1', // 1数据集,2来源表,3 SQL
          'pageNo': '1',
          'pageSize': '550'
        }).then(res => {
          console.log('selectBable查询全字段成功')
          console.log(res)
          if (res.data.code == '200' && res.data.data.length > 0) {
            this.selectIndexId = param.menuId
            console.log(param.menuId)
            console.log('00000000000077777777777777777777777777')
            console.log(this.selectIndexId)
            // param.bz='已选1'
            this.menuData = [...this.menuData]
            if (!this.isExitDisable) { // 选的主表
              this.$storeSave.state.mainTableData = param// 被选中的主表
              this.getId(this.menuData, true)
              this.isExitDisable = !this.isExitDisable
            } else { // 辅表
              this.$storeSave.state.selectMenuData = param
            }
            param.disable = false
            this.$emit('makeTreeData', param)
          } else {
            this.$alert(res.data.message, '提示', {
              confirmButtonText: '确定',
              callback: action => {

              }
            })
          }
        }).catch(err => {
          console.log('查询全字段失败')
          console.log(err)
          this.$alert('查询全字段失败', '提示', {
            confirmButtonText: '确定',
            callback: action => {

            }
          })
        })
      },
     getParentData (data) {
       if (data.constructor === Array) { // 针对编辑进入修改自助数据集，让已选表展示可选
         data.forEach(ele => {
           this.getId(this.menuData, true, {menuId: ele})// 让关联辅表可选
         })
       } else {
        this.getId(this.menuData, true, data)// 让关联辅表可选
       }
    },
    // 置灰不需要的数据
    getId (treeData, booleanText, makeObj) {
      treeData.forEach(ele => {
        if (makeObj) {
          if (ele.menuId == makeObj.menuId) {
            ele.disable = false
            ele.bz = '已选'
            this.menuData = [...this.menuData]
          } else if (ele.bz) {
            ele.disable = false
          } else {
            ele.disable = true
          }
          if (ele.children && ele.children.length > 0) {
            this.getId(ele.children, booleanText, makeObj)
          }
        } else if (ele.bz) {
          console.log('这个不需要改变')
          ele.disable = false
        } else {
          ele.disable = booleanText// 默认不禁用
        }
          ele.label = this.getLabel(ele.type)
        // 判断有子元素,并且子元素的长度大于0就再次调用自身
        if (ele.children && ele.children.length > 0) {
          this.getId(ele.children, booleanText, makeObj)
        }
      })
    },
    // 查询可选表
    getTree () {
      this.isShowLoading = true
        let param = {
          parentId: '0',
          menuId: '0', // 0查询全树，否则查询该节点下树
          type: '1', /// / attr:1-分组，目录，2-叶子节点，表名，子菜单 11-sql,12-EXCEL,13-数据库表，14-自助数据集
          optMode: '1'
        }
        console.log('查询selectTable入参目录')
        console.log(param)
         this.$http.post(MGNDIRQUERY1, param).then(res => {
           this.isShowLoading = false
           console.log('查询selectTable返回值')
           console.log(res.data.data)
           if (res.status == '200' && res.data.data.length > 0) {
            this.menuData = res.data.data
            // this.data.data.forEach
            this.getId(this.menuData, false)// 查询到可选表后，初始默认值
           }
         })
      }
      // cotton(treeData) {
      //   //过滤掉不符合条件的数据
      //   treeData.forEach((ele,index) => {
      //     if (ele.attr !=2 && ele.type !='14') {//剔除非自助数据集的表
      //       this.menuData.splice(index,1)
      //     }
      //     // 判断有子元素,并且子元素的长度大于0就再次调用自身
      //     if (ele.children && ele.children.length > 0) {
      //       this.cotton(ele.children)
      //     }
      //   })
      // },
  }
}
</script>
<style lang="less" scoped>
  .activeBGC{
    background: #17a2b8;
  }
  .colorStyle{
    color: #17a2b8;
  }
  .fontStyle{background:#ccc ;}
</style>
